<!DOCTYPE html>


<html lang="zh-CN">
  

    <head>
      <meta charset="utf-8" />
       
      <meta name="keywords" content="hi~" />
       
      <meta name="description" content="梦见新大陆" />
      
      <meta
        name="viewport"
        content="width=device-width, initial-scale=1, maximum-scale=1"
      />
      <title> 默</title>
  <meta name="generator" content="hexo-theme-ayer">
      
      <link rel="shortcut icon" href="/favicon.ico" />
       
<link rel="stylesheet" href="/dist/main.css">

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/gh/Shen-Yu/cdn/css/remixicon.min.css"
      />
      
<link rel="stylesheet" href="/css/custom.css">
 
      <script src="https://cdn.jsdelivr.net/npm/pace-js@1.0.2/pace.min.js"></script>
       
 

      <link
        rel="stylesheet"
        href="https://cdn.jsdelivr.net/npm/@sweetalert2/theme-bulma@5.0.1/bulma.min.css"
      />
      <script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>

      <!-- mermaid -->
      
      <style>
        .swal2-styled.swal2-confirm {
          font-size: 1.6rem;
        }
      </style>
    <link rel="alternate" href="/atom.xml" title="默" type="application/atom+xml">
</head>
  </html>
</html>


<body>
  <div id="app">
    
      
    <main class="content on">
      
<section class="cover">
    
  <div class="cover-frame">
    <div class="bg-box">
      <img src="/images/cover1.jpg" alt="image frame" />
    </div>
    <div class="cover-inner text-center text-white">
      <h1><a href="/">默</a></h1>
      <div id="subtitle-box">
        
        <span id="subtitle"></span>
        
      </div>
      <div>
        
      </div>
    </div>
  </div>
  <div class="cover-learn-more">
    <a href="javascript:void(0)" class="anchor"><i class="ri-arrow-down-line"></i></a>
  </div>
</section>



<script src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js"></script>


<!-- Subtitle -->

  <script>
    try {
      var typed = new Typed("#subtitle", {
        strings: ['面朝大海，春暖花开', '愿你一生努力，一生被爱', '想要的都拥有，得不到的都释怀'],
        startDelay: 0,
        typeSpeed: 200,
        loop: true,
        backSpeed: 100,
        showCursor: true
      });
    } catch (err) {
      console.log(err)
    }
  </script>
  
<div id="main">
  <section class="outer">
  
  
  

<div class="notice" style="margin-top:50px">
    <i class="ri-heart-fill"></i>
    <div class="notice-content" id="broad"></div>
</div>
<script type="text/javascript">
    fetch('https://v1.hitokoto.cn')
        .then(response => response.json())
        .then(data => {
            document.getElementById("broad").innerHTML = data.hitokoto;
        })
        .catch(console.error)
</script>

<style>
    .notice {
        padding: 20px;
        border: 1px dashed #e6e6e6;
        color: #969696;
        position: relative;
        display: inline-block;
        width: 100%;
        background: #fbfbfb50;
        border-radius: 10px;
    }

    .notice i {
        float: left;
        color: #999;
        font-size: 16px;
        padding-right: 10px;
        vertical-align: middle;
        margin-top: -2px;
    }

    .notice-content {
        display: initial;
        vertical-align: middle;
    }
</style>
  
  <article class="articles">
    
    
    
    
    <article
  id="post-react-hook"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/28/react-hook/"
    >react-hook入门手册</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/28/react-hook/" class="article-date">
  <time datetime="2020-06-28T15:49:02.000Z" itemprop="datePublished">2020-06-28</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/React/">React</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>React Hooks 是 React 16.12 的新增特性。它可以让你在不编写 class 的情况下使用 state 以及其他的 React 特性。</p>
<h3 id="1-useState"><a href="#1-useState" class="headerlink" title="1.useState"></a>1.useState</h3><blockquote>
<p>调用<code>useState</code>方法时做了什么？</p>
</blockquote>
<p>定义一个 state 变量，这是一种在函数调用时保存变量的方式——<code>useState</code>是一种新方法，它与<code>class</code>里的<code>this.state</code>提供的功能完全相同。一般来说，在函数退出后变量就会“消失”，而<code>state</code>中的变量会被<code>react</code>保留。</p> 
      <a class="article-more-link" href="/2020/06/28/react-hook/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/react-hook/" rel="tag">react-hook</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-vue-if-for"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/16/vue-if-for/"
    >vue中v-for和v-if不能同时使用解决方案</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/16/vue-if-for/" class="article-date">
  <time datetime="2020-06-16T09:44:21.000Z" itemprop="datePublished">2020-06-16</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/VUE/">VUE</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><blockquote>
<p>为什么不可以呢？我们 <code>JS</code> 的使用习惯在遍历时使用条件判断是很常见的， <code>vue</code> 模版中当然也是可以使用的，但是<code>v-for</code>和<code>v-if</code>不可以出现在同一个元素上。<br>因为在 <code>vue</code> 中会优先执行 <code>v-for</code>,如果每一次都遍历整个数组，将会影响速度，尤其是当之需要渲染很小一部分的时候。</p>
</blockquote>
<h3 id="使用情景"><a href="#使用情景" class="headerlink" title="使用情景"></a>使用情景</h3><blockquote>
<p><code>v-for</code> 和 <code>v-if</code> 同时使用有 3 种情景：</p>
<ol>
<li> 部分遍历（内/外部条件）：一个 <code>list</code> 中某个属性值符合条件的遍历出来；</li>
<li> 全部遍历（外部条件）：某外部条件符合条件时遍历全部。</li>
<li> 全部遍历（内部条件）：根据某内部条件渲染出不同的内容。</li>
</ol>
</blockquote>
<p>注：内部条件指被遍历数据内部属性值或条件；外部条件指与独立于被遍历数据以外的数据。</p> 
      <a class="article-more-link" href="/2020/06/16/vue-if-for/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/v-for%E4%B8%8Ev-if/" rel="tag">v-for与v-if</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-text-ellipsis"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/09/text-ellipsis/"
    >css文字超出显示省略号</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/09/text-ellipsis/" class="article-date">
  <time datetime="2020-06-09T11:11:17.000Z" itemprop="datePublished">2020-06-09</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h5 id="一-单行文本超出省略"><a href="#一-单行文本超出省略" class="headerlink" title="一.单行文本超出省略"></a>一.单行文本超出省略</h5><blockquote>
<p>关键属性：<code>text-overflow:ellipsis|clip</code> 。<br><code>clip</code> : 　不显示省略标记（…），而是简单的裁切掉溢出的文本<br><code>ellipsis</code> : 　当对象内文本溢出时显示省略标记（…）<br><code>string</code>: 使用指定字符串来代表被修剪的文本<br>兼容性：所有主流浏览器都兼容, IE6+</p>
</blockquote>
<p>1.css 实现：</p>
<figure class="highlight css"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="selector-tag">div</span> &#123;</span><br><span class="line">  <span class="attribute">overflow</span>: hidden;</span><br><span class="line">  <span class="attribute">text-overflow</span>: ellipsis;</span><br><span class="line">  <span class="attribute">white-space</span>: nowrap;</span><br><span class="line">&#125;</span><br></pre></td></tr></table></figure>

<p>2.css+html 实现：</p>
<blockquote>
<p>使用<code>&lt;nobr&gt;</code>不换行标签（行内标签）此标签与 css <code>white-space</code> 功能相同。<br>详情参考<a target="_blank" rel="noopener" href="http://www.divcss5.com/html/h533.shtml">http://www.divcss5.com/html/h533.shtml</a> 。<br><code>&lt;nobr&gt;</code>兼容性：IE11+</p>
</blockquote> 
      <a class="article-more-link" href="/2020/06/09/text-ellipsis/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/webkit-line-clamp/" rel="tag">-webkit-line-clamp</a></li><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/text-ellipsis/" rel="tag">text-ellipsis</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-ie-bug"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/09/ie-bug/"
    >ie浏览器踩坑系列</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/09/ie-bug/" class="article-date">
  <time datetime="2020-06-09T11:08:48.000Z" itemprop="datePublished">2020-06-09</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/IE/">IE</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h6 id="持续更新…"><a href="#持续更新…" class="headerlink" title="持续更新…"></a>持续更新…</h6><p>1.使用 antv ，当有两种渲染方式：canvas 和 svg，最好选择 canvas 方式，因为 svg 在 IE 浏览器下有很多 bug。</p> 
      <a class="article-more-link" href="/2020/06/09/ie-bug/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ie/" rel="tag">ie</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-vue-class"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/09/vue-class/"
    >vue动态绑定class与style</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/09/vue-class/" class="article-date">
  <time datetime="2020-06-09T10:19:29.000Z" itemprop="datePublished">2020-06-09</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/VUE/">VUE</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><blockquote>
<p>基于 vue 开发的项目中有的交互需要修改元素的样式，就会用到 class 或 style 的动态绑定。当样式的属性值是变量时一般使用 style，其他情况最好使用 class，个人觉得这样模版代码更好维护一点。</p>
</blockquote>
<h5 id="1-绑定-class-方式"><a href="#1-绑定-class-方式" class="headerlink" title="1.绑定 class 方式"></a>1.绑定 class 方式</h5><p>js 代码：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><span class="line"><span class="function"><span class="title">data</span>(<span class="params"></span>)</span>&#123;</span><br><span class="line">  <span class="keyword">return</span> &#123;</span><br><span class="line">    <span class="attr">isActive</span>:<span class="literal">true</span>,</span><br><span class="line">    <span class="attr">isCenter</span>: <span class="literal">false</span>,</span><br><span class="line">    <span class="attr">class2</span>: <span class="string">&#x27;align-center&#x27;</span></span><br><span class="line">    &#125;</span><br><span class="line">  &#125;</span><br></pre></td></tr></table></figure> 
      <a class="article-more-link" href="/2020/06/09/vue-class/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/vue/" rel="tag">vue</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-git-command"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/06/08/git-command/"
    >git常用命令</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/06/08/git-command/" class="article-date">
  <time datetime="2020-06-08T10:11:38.000Z" itemprop="datePublished">2020-06-08</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/Git/">Git</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><blockquote>
<p>git 相关知识可以说是开发者的必备常识，虽然目前市面有很多方便的可视化操作工具，但是 git 的指令用起来不仅方便快捷而且显得更加有逼格，况且面试的时候有可能被问到，所以还是有必要学习并掌握的。</p>
</blockquote>
<h5 id="1-基础指令"><a href="#1-基础指令" class="headerlink" title="1.基础指令"></a>1.基础指令</h5><p>克隆远程仓库代码到本地</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">git clone 远程仓库地址</span><br></pre></td></tr></table></figure>

<p>添加变更到暂存区</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><span class="line">git add . <span class="comment">//添加全部变更</span></span><br><span class="line">git add &lt;fileName&gt; <span class="comment">//添加指定文件的变更</span></span><br></pre></td></tr></table></figure> 
      <a class="article-more-link" href="/2020/06/08/git-command/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/git/" rel="tag">git</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-es6-array-from"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2020/01/10/es6-array-from/"
    >ES6之你不知道的Array.from()</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2020/01/10/es6-array-from/" class="article-date">
  <time datetime="2020-01-10T18:30:57.000Z" itemprop="datePublished">2020-01-10</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/ES6/">ES6</a> / <a class="article-category-link" href="/categories/ES6/Array/">Array</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>先来了解几个概念：</p>
<blockquote>
<p>数组：是有序的元素序列，其索引是从 0 开始自然增长的整数，元素值可以是任何 JavaScript 值，并且包含一个名为 length 属性，该属性值表示数组元素的长度。</p>
</blockquote>
<blockquote>
<p>对象：JavaScript 中对象类型为一组无序的由键/值组成的数据集合，其元素的键名和值都可以自定义。</p>
</blockquote>
<blockquote>
<p>类数组对象：是一种类似数组的对象。最基本的要求就是具有 length 属性的对象。</p>
</blockquote>
<h3 id="三种使用方式"><a href="#三种使用方式" class="headerlink" title="三种使用方式"></a>三种使用方式</h3><p>根据传参的形式不同分为三种使用方式。</p>
<h5 id="1-Array-from-length-x-Fn"><a href="#1-Array-from-length-x-Fn" class="headerlink" title="1. Array.from({length: x}, Fn)"></a>1. Array.from({length: x}, Fn)</h5><p>第一个参数指定了第二个参数的执行次数，返回一个长度为 x 的数组。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><span class="line"><span class="built_in">Array</span>.from(&#123; <span class="attr">length</span>: <span class="number">3</span> &#125;, <span class="function">() =&gt;</span> <span class="string">&#x27;lemon&#x27;</span>) <span class="comment">// [&quot;lemon&quot;, &quot;lemon&quot;, &quot;lemon&quot;]</span></span><br><span class="line"><span class="built_in">Array</span>.from(&#123; <span class="attr">length</span>: <span class="number">3</span> &#125;, <span class="function">(<span class="params">v, i</span>) =&gt;</span> i) <span class="comment">// 生成一个从0开始的的数组[0, 1, 2] 这里我暂时还有疑问参数v是什么？？？</span></span><br><span class="line"></span><br><span class="line"><span class="built_in">Array</span>.from(&#123; <span class="attr">length</span>: <span class="number">3</span> &#125;, <span class="function">(<span class="params">v, i</span>) =&gt;</span> (item = &#123; <span class="attr">year</span>: i + <span class="number">2000</span> &#125;)) <span class="comment">// 生成一个年份对象数组[&#123;&#x27;year&#x27;: 2000, &#x27;year&#x27;: 2001, &#x27;year&#x27;: 2002&#125;]</span></span><br></pre></td></tr></table></figure> 
      <a class="article-more-link" href="/2020/01/10/es6-array-from/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/ES6/" rel="tag">ES6</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-vue-i18n"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2019/12/26/vue-i18n/"
    >Vue+vue-i18n+Element UI实现多语言切换</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2019/12/26/vue-i18n/" class="article-date">
  <time datetime="2019-12-26T18:03:51.000Z" itemprop="datePublished">2019-12-26</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/VUE/">VUE</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <h6 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h6><blockquote>
<p>Vue I18n 是 Vue.js 的国际化插件。最近项目需求——给网站加中英文语言切换功能，使用的是 vue-i8n。老大修改了项目架构使项目支持 i8n，铺垫做的好就使用起来很 easy 了，整理数据然后比着葫芦画瓢就实现了想要的功能。一直以来我的短板就是学习东西不够深入，总是浅尝辄止于会用，发现了不足就去努力克服吧。不能止步于会用，现在就开始从头学习整理一下项目架构是如何配合 i18n 来使用的。</p>
</blockquote>
<h6 id="1-安装"><a href="#1-安装" class="headerlink" title="1.安装"></a>1.安装</h6><p>1)npm</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">npm install vue-i18n</span><br></pre></td></tr></table></figure>

<p>2)yarn</p>
<figure class="highlight bash"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">yarn add vue-i18n</span><br></pre></td></tr></table></figure>

<h6 id="2-开始"><a href="#2-开始" class="headerlink" title="2.开始"></a>2.开始</h6> 
      <a class="article-more-link" href="/2019/12/26/vue-i18n/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/i18n/" rel="tag">i18n</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-background-clip"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2019/12/09/background-clip/"
    >background-clip属性详解</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2019/12/09/background-clip/" class="article-date">
  <time datetime="2019-12-09T19:06:20.000Z" itemprop="datePublished">2019-12-09</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/CSS/">CSS</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>对于每个前端开发者来说，CSS 中的 <strong>background</strong> 属性用起来该是游刃有余了。但是 CSS3 的 <strong>background-clip</strong> 属性可能不太了解，下面就来跟我一起学习这个属性吧。</p>
</blockquote>
<p><code>background-clip</code>，顾名思义肯定跟背景裁切有关。没错，它存在以下四个属性值</p>
<ul>
<li>border-box（默认值）</li>
<li>padding-box</li>
<li>content-box</li>
<li>text</li>
</ul>
<p>我在网上查了很多资源大部分都只写了前三个属性值，这也是这篇博客诞生的缘故之一。作为一个笔记，假如碰巧被你看到，再碰巧对你有所帮助那就再好不过啦~</p>
<p>下面我们通过具体 Demo 介绍一下每个属性值。</p> 
      <a class="article-more-link" href="/2019/12/09/background-clip/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/CSS/" rel="tag">CSS</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
    <article
  id="post-reading-lifetime"
  class="article article-type-post"
  itemscope
  itemprop="blogPost"
  data-scroll-reveal
>
  <div class="article-inner">
    
    <header class="article-header">
       
<h2 itemprop="name">
  <a class="article-title" href="/2019/12/05/reading-lifetime/"
    >读书是一生的事</a> 
</h2>
 

      
    </header>
     
    <div class="article-meta">
      <a href="/2019/12/05/reading-lifetime/" class="article-date">
  <time datetime="2019-12-05T17:27:11.000Z" itemprop="datePublished">2019-12-05</time>
</a> 
  <div class="article-category">
    <a class="article-category-link" href="/categories/%E9%9A%8F%E7%AC%94/">随笔</a> / <a class="article-category-link" href="/categories/%E9%9A%8F%E7%AC%94/%E9%98%85%E8%AF%BB/">阅读</a>
  </div>
   
    </div>
      
    <div class="article-entry" itemprop="articleBody">
       
  <blockquote>
<p>转载《读者》杂志中一篇王凤的文章——读书是一生的事，分享给那些和我一样默默坚持的你。</p>
</blockquote>
<h3 id="什么是底层"><a href="#什么是底层" class="headerlink" title="什么是底层"></a>什么是底层</h3><p>念高中时，常听班主任提起一个学姐。她几乎不跟周围的人说话，也没什么朋友，直到高考，她考进全省前 10 名。市里去拍摄宣传片时，大家才发现她家中一贫如洗，父亲早已过世，母亲卧病在床。读高中时，为了省钱，她经常趁别人吃完饭离开后，去捡剩的馒头，一边捡，一边吃。那时候，有些高校会给优秀高考生数万元的奖金。她说，她高中 3 年拼命学习，目标就是拿到那笔钱，这样她就能赚够学费了，亲人就再也不能逼她辍学，早点嫁人。“像我这种出身卑微的人，连任性的资格都没有，就害怕一停下来，便被别人狠狠地甩在后面。”知乎上有个提问：底层出身的孩子，假设当年没能考上“985”或者“211”大学，你会损失和错过什么？什么是底层？就是除了你自己，一无所有。只能靠自己的人，连个性都是奢侈品。</p>
<h3 id="人生入场券"><a href="#人生入场券" class="headerlink" title="人生入场券"></a>人生入场券</h3> 
      <a class="article-more-link" href="/2019/12/05/reading-lifetime/"
        >阅读更多...</a
      >
       
      <!-- reward -->
      
    </div>
    

    <!-- copyright -->
    
    <footer class="article-footer">
       
  <ul class="article-tag-list" itemprop="keywords"><li class="article-tag-list-item"><a class="article-tag-list-link" href="/tags/%E9%9A%8F%E7%AC%94/" rel="tag">随笔</a></li></ul>

    </footer>
  </div>

    
 
    
</article>

    
  </article>
  

  
  <nav class="page-nav">
    
    <a class="extend prev" rel="prev" href="/page/2/">上一页</a><a class="page-number" href="/">1</a><a class="page-number" href="/page/2/">2</a><span class="page-number current">3</span><a class="page-number" href="/page/4/">4</a><a class="extend next" rel="next" href="/page/4/">下一页</a>
  </nav>
  
</section>
</div>

      <footer class="footer">
  <div class="outer">
    <ul>
      <li>
        Copyrights &copy;
        2015-2021
        <i class="ri-heart-fill heart_icon"></i> Lillian
      </li>
    </ul>
    <ul>
      <li>
        
      </li>
    </ul>
    <ul>
      <li>
        
        
        <span>
  <span><i class="ri-user-3-fill"></i>访问人数:<span id="busuanzi_value_site_uv"></span></span>
  <span class="division">|</span>
  <span><i class="ri-eye-fill"></i>浏览次数:<span id="busuanzi_value_page_pv"></span></span>
</span>
        
      </li>
    </ul>
    <ul>
      
    </ul>
    <ul>
      
    </ul>
    <ul>
      <li>
        <!-- cnzz统计 -->
        
        <script type="text/javascript" src='https://s9.cnzz.com/z_stat.php?id=1278069914&amp;web_id=1278069914'></script>
        
      </li>
    </ul>
  </div>
</footer>    
    </main>
    <div class="float_btns">
      <div class="totop" id="totop">
  <i class="ri-arrow-up-line"></i>
</div>

<div class="todark" id="todark">
  <i class="ri-moon-line"></i>
</div>

    </div>
    <aside class="sidebar on">
      <button class="navbar-toggle"></button>
<nav class="navbar">
  
  <div class="logo">
    <a href="/"><img src="/assets/imgs/header.png" alt="默"></a>
  </div>
  
  <ul class="nav nav-main">
    
    <li class="nav-item">
      <a class="nav-item-link" href="/">主页</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/archives">归档</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/categories">分类</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/tags">标签</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/travel">旅行</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/photos">摄影</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/friends">友链</a>
    </li>
    
    <li class="nav-item">
      <a class="nav-item-link" href="/2019/10/01/about/">关于我</a>
    </li>
    
  </ul>
</nav>
<nav class="navbar navbar-bottom">
  <ul class="nav">
    <li class="nav-item">
      
      <a class="nav-item-link nav-item-search"  title="搜索">
        <i class="ri-search-line"></i>
      </a>
      
      
      <a class="nav-item-link" target="_blank" href="/atom.xml" title="RSS Feed">
        <i class="ri-rss-line"></i>
      </a>
      
    </li>
  </ul>
</nav>
<div class="search-form-wrap">
  <div class="local-search local-search-plugin">
  <input type="search" id="local-search-input" class="local-search-input" placeholder="Search...">
  <div id="local-search-result" class="local-search-result"></div>
</div>
</div>
    </aside>
    <div id="mask"></div>

<!-- #reward -->
<div id="reward">
  <span class="close"><i class="ri-close-line"></i></span>
  <p class="reward-p"><i class="ri-cup-line"></i>请我喝杯咖啡吧~</p>
  <div class="reward-box">
    
    <div class="reward-item">
      <img class="reward-img" src="/assets/imgs/alipay.jpg">
      <span class="reward-type">支付宝</span>
    </div>
    
    
    <div class="reward-item">
      <img class="reward-img" src="/assets/imgs/weixin.jpg">
      <span class="reward-type">微信</span>
    </div>
    
  </div>
</div>
    
<script src="/js/jquery-3.6.0.min.js"></script>
 
<script src="/js/lazyload.min.js"></script>

<!-- Tocbot -->

<script src="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.js"></script>
<link
  rel="stylesheet"
  href="https://cdn.jsdelivr.net/npm/jquery-modal@0.9.2/jquery.modal.min.css"
/>
<script src="https://cdn.jsdelivr.net/npm/justifiedGallery@3.7.0/dist/js/jquery.justifiedGallery.min.js"></script>

<script src="/dist/main.js"></script>

<!-- ImageViewer -->
 <!-- Root element of PhotoSwipe. Must have class pswp. -->
<div class="pswp" tabindex="-1" role="dialog" aria-hidden="true">

    <!-- Background of PhotoSwipe. 
         It's a separate element as animating opacity is faster than rgba(). -->
    <div class="pswp__bg"></div>

    <!-- Slides wrapper with overflow:hidden. -->
    <div class="pswp__scroll-wrap">

        <!-- Container that holds slides. 
            PhotoSwipe keeps only 3 of them in the DOM to save memory.
            Don't modify these 3 pswp__item elements, data is added later on. -->
        <div class="pswp__container">
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
            <div class="pswp__item"></div>
        </div>

        <!-- Default (PhotoSwipeUI_Default) interface on top of sliding area. Can be changed. -->
        <div class="pswp__ui pswp__ui--hidden">

            <div class="pswp__top-bar">

                <!--  Controls are self-explanatory. Order can be changed. -->

                <div class="pswp__counter"></div>

                <button class="pswp__button pswp__button--close" title="Close (Esc)"></button>

                <button class="pswp__button pswp__button--share" style="display:none" title="Share"></button>

                <button class="pswp__button pswp__button--fs" title="Toggle fullscreen"></button>

                <button class="pswp__button pswp__button--zoom" title="Zoom in/out"></button>

                <!-- Preloader demo http://codepen.io/dimsemenov/pen/yyBWoR -->
                <!-- element will get class pswp__preloader--active when preloader is running -->
                <div class="pswp__preloader">
                    <div class="pswp__preloader__icn">
                        <div class="pswp__preloader__cut">
                            <div class="pswp__preloader__donut"></div>
                        </div>
                    </div>
                </div>
            </div>

            <div class="pswp__share-modal pswp__share-modal--hidden pswp__single-tap">
                <div class="pswp__share-tooltip"></div>
            </div>

            <button class="pswp__button pswp__button--arrow--left" title="Previous (arrow left)">
            </button>

            <button class="pswp__button pswp__button--arrow--right" title="Next (arrow right)">
            </button>

            <div class="pswp__caption">
                <div class="pswp__caption__center"></div>
            </div>

        </div>

    </div>

</div>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/default-skin/default-skin.min.css">
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/photoswipe@4.1.3/dist/photoswipe-ui-default.min.js"></script>

<script>
    function viewer_init() {
        let pswpElement = document.querySelectorAll('.pswp')[0];
        let $imgArr = document.querySelectorAll(('.article-entry img:not(.reward-img)'))

        $imgArr.forEach(($em, i) => {
            $em.onclick = () => {
                // slider展开状态
                // todo: 这样不好，后面改成状态
                if (document.querySelector('.left-col.show')) return
                let items = []
                $imgArr.forEach(($em2, i2) => {
                    let img = $em2.getAttribute('data-idx', i2)
                    let src = $em2.getAttribute('data-target') || $em2.getAttribute('src')
                    let title = $em2.getAttribute('alt')
                    // 获得原图尺寸
                    const image = new Image()
                    image.src = src
                    items.push({
                        src: src,
                        w: image.width || $em2.width,
                        h: image.height || $em2.height,
                        title: title
                    })
                })
                var gallery = new PhotoSwipe(pswpElement, PhotoSwipeUI_Default, items, {
                    index: parseInt(i)
                });
                gallery.init()
            }
        })
    }
    viewer_init()
</script> 
<!-- MathJax -->

<!-- Katex -->

<!-- busuanzi  -->
 
<script src="/js/busuanzi-2.3.pure.min.js"></script>
 
<!-- ClickLove -->

<!-- ClickBoom1 -->

<!-- ClickBoom2 -->

<!-- CodeCopy -->
 
<link rel="stylesheet" href="/css/clipboard.css">
 <script src="https://cdn.jsdelivr.net/npm/clipboard@2/dist/clipboard.min.js"></script>
<script>
  function wait(callback, seconds) {
    var timelag = null;
    timelag = window.setTimeout(callback, seconds);
  }
  !function (e, t, a) {
    var initCopyCode = function(){
      var copyHtml = '';
      copyHtml += '<button class="btn-copy" data-clipboard-snippet="">';
      copyHtml += '<i class="ri-file-copy-2-line"></i><span>COPY</span>';
      copyHtml += '</button>';
      $(".highlight .code pre").before(copyHtml);
      $(".article pre code").before(copyHtml);
      var clipboard = new ClipboardJS('.btn-copy', {
        target: function(trigger) {
          return trigger.nextElementSibling;
        }
      });
      clipboard.on('success', function(e) {
        let $btn = $(e.trigger);
        $btn.addClass('copied');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-checkbox-circle-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPIED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-checkbox-circle-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
      clipboard.on('error', function(e) {
        e.clearSelection();
        let $btn = $(e.trigger);
        $btn.addClass('copy-failed');
        let $icon = $($btn.find('i'));
        $icon.removeClass('ri-file-copy-2-line');
        $icon.addClass('ri-time-line');
        let $span = $($btn.find('span'));
        $span[0].innerText = 'COPY FAILED';
        
        wait(function () { // 等待两秒钟后恢复
          $icon.removeClass('ri-time-line');
          $icon.addClass('ri-file-copy-2-line');
          $span[0].innerText = 'COPY';
        }, 2000);
      });
    }
    initCopyCode();
  }(window, document);
</script>
 
<!-- CanvasBackground -->

<script>
  if (window.mermaid) {
    mermaid.initialize({ theme: "forest" });
  }
</script>


    
    

  </div>
<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"log":false,"model":{"jsonPath":"/live2dw/assets/wanko.model.json"},"display":{"position":"right","width":160,"height":300},"mobile":{"show":false,"scale":0.5}});</script></body>

</html>